// 头部导航
let aLi=document.querySelectorAll(".nav_right>li")
let aBox=document.querySelectorAll(".nav_right>li>div")
let aI=document.querySelectorAll(".nav_right>li>span>a>i")

// console.log(aBox)
// console.log(aLi)
for(let i=0;i<aLi.length;i++){
    aLi[i].t=i;
    if(i===0||i===2||i===4||i===5||i===6||i===8){
        aLi[i].onmouseenter=function(){
            this.style.border="1px solid #dbdada";
            // this.style.border-bottom="none";
            this.style.background="#fff";
            aBox[aLi[i].t].style.display="block";
            this.style.borderBottom="none";
            aBox[aLi[i].t].style.borderTop="none";
         
            aI[aLi[i].t].className="iconfont icon-jiantouarrow492"

            aLi[ aLi[i].t].onmouseleave=function(){
            this.style.border="none";
            this.style.background="none";
            aBox[aLi[i].t].style.display="none";
            aI[aLi[i].t].className="iconfont icon-ico_arrowdown"
            }
        }
    }
}

// 商品信息筛选部分
let pack=document.querySelector(".pack-inner .button");
let aList=document.querySelectorAll(".filter-inner>div");

let flag=0;
pack.onclick=function(){
    if(flag===0){
        aList[4].style.display="block";
        aList[5].style.display="block";
        aList[6].style.display="block";
        aList[7].style.display="block";
        aList[8].style.display="block";
        pack.innerHTML=`<a href="##">
        <span>点击收起</span>
        <i class="iconfont icon-jiantoushang"></i>
        </a>`;
        flag=1;

    }else{
        aList[4].style.display="none";
        aList[5].style.display="none";
        aList[6].style.display="none";
        aList[7].style.display="none";
        aList[8].style.display="none";
        pack.innerHTML=`<a href="##">
        <span>更多选项</span>
        <i class="iconfont icon-jiantouxia"></i>
        </a>`;
        flag=0;

    }
}  

// 渲染部分
const box = document.querySelector(".mes-inner");
ajaxPost("http://localhost:3000/api",(res)=>{
        res=JSON.parse(res)
        console.log(res.data)
        let str = "";
        res.data.forEach(val=>{
            str+=`<div class="mes" index="${val.goodsId}">
                <a href="./spxq.html?id=${val.goodsId}">
                    <img src="${val.proImg}" alt="">
                    <h4>￥${val.size_price[0].price}</h4>
                    <p>${val.proName}</p>
                    <span>爆款</span>
                </a>
            </div>`
            box.innerHTML=str;
            
        })
        },{
        type:"goods"
        })


// 计算购物车总数量
const goodsMsg =localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];
let num =0;
console.log(goodsMsg)
goodsMsg.forEach((val)=>{
    if(val){
        num+=parseInt(val.num)
       
    }

})
console.log(num)




// 登录守卫
let login_mark = document.querySelector("#login_mark");
let register_mark = document.querySelector("#register_mark");
let span_mark = document.querySelector(".span-r");

function defend(){
    if (localStorage.getItem("isLogin")==="OK"){
        login_mark.innerHTML=`<a href="#">
        ${localStorage.getItem("username")}
        <i class="iconfont icon-ico_arrowdown"></i>
        </a>`;
        register_mark.innerHTML=`<a href="./index.html">
        退出
        <i></i>
        </a>`;
        register_mark.onclick=function(){
            localStorage.setItem("isLogin","")
        };
        span_mark.innerHTML=num
    
    
        }else{login_mark.innerHTML=`<a href="./login.html">
            请登录
            <i class="iconfont icon-ico_arrowdown"></i>
            </a>`;
            register_mark.innerHTML=`<a href="./register.html">
            注册
            <i></i>
            </a>`;
            span_mark.innerHTML=0
        
        }
    nav()


}
defend()
    
